<template>
  <!-- 工作计划核查表 -->
  <div>
    <Card>
      <el-form :model="queryParams">
        <el-row>
          <el-col :span="6">
            <el-form-item prop="aaaa" label="">
              <Cascader change-on-select :data="organizationList" v-model="queryParams.aaaa" style="width: 100%;"
                placeholder="请选择机构" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="cccc" label="">
              <el-select v-model="queryParams.cccc" clearable filterable placeholder="续收组" style="width: 100%;">
                <el-option v-for="item in reagentCodeListZ" :key="item.key" :value="item.key">
                  {{ item.value }}-{{ item.key }}
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="eeee" label="">
              <el-select v-model="queryParams.eeee" clearable filterable placeholder="续收专员" style="width: 100%;">
                <el-option v-for="item in reagentCodeListM" :key="item.key" :value="item.key">
                  {{ item.value }}-{{ item.key }}
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="bbbb" label="">
              <el-select v-model="queryParams.bbbb" clearable filterable placeholder="任务类型" style="width: 100%;">
                <el-option
                  v-for="item in [{ value: '1', label: '应交前' }, { value: '2', label: '应交期' }, { value: '3', label: '前瞻期' }, { value: '4', label: '失效件' }]"
                  :key="item.value" :value="item.value">
                  {{ item.label }}
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="dddd" label="">
              <el-select v-model="queryParams.dddd" clearable filterable placeholder="交次" style="width: 100%;">
                <el-option v-for="item in ddddList" :key="item.key" :value="item.key">
                  {{ item.value }}
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="">
              <div style="display: inline-block;float: right;">
                <el-button type="primary" size="mini">查询
                </el-button>
                <el-button type="info" plain size="mini">重置
                </el-button>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </Card>
    <Card style="margin-top: 20px;">
      <el-table :data="tableList" style="width: 100%;">
        <el-table-column label="序号" align="center" type="index" />
        <el-table-column width="110" label="管理机构" prop="bbbb" align="center" />
        <!-- <el-table-column label="统计月份" prop="aaaa" align="center" /> -->
        <el-table-column width="110" label="续收组经理" prop="dddd" align="center" />
        <el-table-column label="续收员" prop="cccc" align="center" />
        <el-table-column width="110" label="应收件数" prop="eeee" align="center" />
        <el-table-column width="110" label="已计划件数" prop="ffff" align="center" />
        <el-table-column label="计划占比" prop="gggg" align="center" />
        <el-table-column width="110" label="人工计划件数" prop="hhhh" align="center" />
        <el-table-column width="110" label="人工计划占比" prop="iiii" align="center" />
        <el-table-column width="110" label="未计划件数" prop="jjjj" align="center" />
        <el-table-column width="110" label="未计划占比" prop="kkkk" align="center" />

        <el-table-column width="110" label="交费预估件数" prop="llll" align="center" />
        <el-table-column width="110" label="交费预估件数" prop="mmmm" align="center" />
        <el-table-column width="110" label="交费预估占比" prop="nnnn" align="center" />
        <el-table-column label="完成件数" prop="oooo" align="center" />
        <el-table-column label="完成占比" prop="pppp" align="center" />
        <!-- <el-table-column width="110" label="服务完成次数" prop="mmmm" align="center" /> -->
      </el-table>
      <pagination :total="tableList.length" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </Card>
  </div>
</template>
<script>
export default {
  name: "WorkplanChecklist",
  data() {
    return {
      queryParams: {},
      organizationList: [],
      ddddList: [{ key: "1", value: "全部" },
      { key: "2", value: "二次" },
      { key: "3", value: "三次" },
      { key: "4", value: "四次及以上" },],
      reagentCodeListZ: [{
        "value": "奚云峰组",
        "key": "100003"
      },
      {
        "value": "黄睿肃组",
        "key": "100004"
      },
      {
        "value": "虚拟组",
        "key": "100023"
      },
      {
        "value": "王sm组",
        "key": "100009"
      },],
      tableList: [{
        aaaa: '2023-08', bbbb: '无锡分公司1', cccc: '左思雨',
        dddd: '田慕雨', eeee: '152', ffff: '150',
        gggg: '14%', hhhh: '110', iiii: '14', jjjj: '35', kkkk: '10', llll: '30', mmmm: '135',
        nnnn: '20%', oooo: '321', pppp: '60%'
      }, {
        aaaa: '2023-08', bbbb: '无锡分公司2', cccc: '时林',
        dddd: '田慕雨', eeee: '172', ffff: '120',
        gggg: '17%', hhhh: '120', iiii: '58', jjjj: '24', kkkk: '35', llll: '40', mmmm: '128',
        nnnn: '20%', oooo: '321', pppp: '60%'
      }, {
        aaaa: '2023-08', bbbb: '无锡分公司3', cccc: '阎华雯',
        dddd: '田慕雨', eeee: '122', ffff: '154',
        gggg: '20%', hhhh: '130', iiii: '14', jjjj: '36', kkkk: '47', llll: '25', mmmm: '160',
        nnnn: '20%', oooo: '321', pppp: '60%'
      }, {
        aaaa: '2023-08', bbbb: '无锡分公司4', cccc: '韩超',
        dddd: '田慕雨', eeee: '192', ffff: '170',
        gggg: '17%', hhhh: '140', iiii: '35', jjjj: '47', kkkk: '36', llll: '26', mmmm: '158',
        nnnn: '20%', oooo: '321', pppp: '60%'
      }, {
        aaaa: '2023-08', bbbb: '无锡分公司1', cccc: '杨志嫣',
        dddd: '田慕雨', eeee: '152', ffff: '150',
        gggg: '14%', hhhh: '110', iiii: '14', jjjj: '35', kkkk: '10', llll: '30', mmmm: '135',
        nnnn: '20%', oooo: '321', pppp: '60%'
      }, {
        aaaa: '2023-08', bbbb: '无锡分公司3', cccc: '李羿潼',
        dddd: '田慕雨', eeee: '122', ffff: '154',
        gggg: '20%', hhhh: '130', iiii: '14', jjjj: '36', kkkk: '47', llll: '25', mmmm: '160',
        nnnn: '20%', oooo: '321', pppp: '60%'
      }, {
        aaaa: '2023-08', bbbb: '无锡分公司2', cccc: '杨帅',
        dddd: '田慕雨', eeee: '172', ffff: '120',
        gggg: '17%', hhhh: '120', iiii: '58', jjjj: '24', kkkk: '35', llll: '40', mmmm: '128',
        nnnn: '20%', oooo: '321', pppp: '60%'
      },],
      total: 4,
    }
  },
  created() { this.getAllOrganization() },
  methods: {
    getList() { },
    // 获取续期专员机构下拉框信息
    getAllOrganization() {
      // this.api.selectUerList().then(res => {
      //   if (res.code == 200 && res.data != null) {
      //     this.organizationList = res.data[0].listKeyValueVOS;
      //   } else {
      //     this.organizationList = [];
      //   }
      // });
      this.api.remanagecomList().then(res => {
        if (res.code == 200 && res.data != null) {
          let arr = []
          arr.push(res.data)
          arr.forEach(one => {
            one.value = one.comcode
            one.label = one.comcode + '-' + one.name
            one.children = one.chilDren || []
            if (one.children) {
              one.chilDren.forEach(two => {
                two.value = two.comcode
                two.label = two.comcode + '-' + two.name
                two.children = two.chilDren || []
                if (two.children) {
                  two.children.forEach(three => {
                    three.value = three.comcode
                    three.label = three.comcode + '-' + three.name
                    three.children = three.chilDren || []
                    if (three.children) {
                      three.children.forEach(four => {
                        four.value = four.comcode
                        four.label = four.comcode + '-' + four.name
                        four.children = four.chilDren || []
                      })
                    }
                  })
                }
              })
            }
          })
          console.log(arr);
          this.organizationList = arr
        } else {
          this.organizationList = [];
        }
      });
    },
  }
}
</script>